<template>
  <div>
    <!-- 头部 -->
    <page-tools :show-before="true">
      <!-- 前面内容 -->
      <template v-slot:before>有 0 条考勤审批尚未处理</template>
      <template v-slot:after>
        <el-button size="mini" type="primary">导入</el-button>
        <el-button size="mini" type="primary">提醒</el-button>
        <el-button size="mini" type="primary">设置</el-button>
        <el-button size="mini" type="primary">历史归档</el-button>
        <el-button size="mini" type="primary">3月份报表</el-button>
      </template>
    </page-tools>

    <!-- 部门 -->
    <el-card>
      <div>
        部门：
      </div>
      <div>
        <!-- 多选 -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="item in depts" :key="item" :label=" item " />
          <el-checkbox-group /></el-checkbox-group></div>

      <!-- 单选 -->
      <div class="box">
        考勤状态： <el-radio-group v-model="radio">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">旷工</el-radio>
          <el-radio :label="3">事假</el-radio>
          <el-radio :label="4">调休</el-radio>
          <el-radio :label="5">迟到</el-radio>
          <el-radio :label="6">早退</el-radio>
        </el-radio-group>
      </div>
    </el-card>

    <!-- 表格 -->
    <div style="overflow:scroll">
      <table border="0" align="center" cellpadding="0" cellspacing="0" class="tableInfo">
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>工号</th>
          <th>部门</th>
          <th>手机</th>
          <th v-for="(item, index) in 30" :key="index">{{ `3/${item}` }}</th>
        </tr>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ index+1 }}</td>
          <td>{{ item.username }}</td>
          <td>{{ item.workNumber }}</td>
          <td>{{ item.departmentName }}</td>
          <td>{{ item.mobile }}</td>
          <td
            v-for="(item2,index2) in item.attendanceRecord"
            :key="index2"
            width="110"
          >
            <span v-if="item2.adtStatu===1">√</span>
            <span v-if="item2.adtStatu===2">旷工</span>
            <span v-if="item2.adtStatu===3">迟到</span>
            <span v-if="item2.adtStatu===4">早退</span>
            <span v-if="item2.adtStatu===5">外出</span>
            <span v-if="item2.adtStatu===6">出差</span>
            <span v-if="item2.adtStatu===7">年假</span>
            <span v-if="item2.adtStatu===8">事假</span>
            <span v-if="item2.adtStatu===9">病假</span>
            <span v-if="item2.adtStatu===10">婚假</span>
            <span v-if="item2.adtStatu===11">丧假</span>
            <span v-if="item2.adtStatu===12">产假</span>
            <span v-if="item2.adtStatu===13">奖励产假</span>
            <span v-if="item2.adtStatu===14">陪产假</span>
            <span v-if="item2.adtStatu===15">探亲假</span>
            <span v-if="item2.adtStatu===16">工伤假</span>
            <span v-if="item2.adtStatu===17">调休</span>
            <span v-if="item2.adtStatu===18">产检假</span>
            <span v-if="item2.adtStatu===19">流产假2</span>
            <span v-if="item2.adtStatu===20">长期病假</span>
            <span v-if="item2.adtStatu===21">测试架</span>
            <span v-if="item2.adtStatu===22">补签</span>
          </td>
        </tr>
      </table>
    </div>

    <!-- 分页组件 -->
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :page-size="page.size"
        :total="page.total"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances'
export default {
  data() {
    return {
      list: [], // 所有数据列表
      depts: ['总裁办', '行政部', '人事部', '财务部', '技术部', '运营部', '市场部', '财务核算部', '税务管理部', '薪资管理部', 'Java研发部', 'Python研发部', 'Php研发部', '北京事业部', '上海事业部'], // 部门列表

      checkList: [], // 保存选中的部门
      radio: '', // 单选 工作状态

      page: {
        page: 1,
        size: 10,
        total: 100
      },
      employeeList: []
    }
  },
  async created() {
    this.getAttendancesListMock()
  },
  methods: {
    async getAttendancesListMock() {
      const res = await getAttendancesListMock()
      console.log(res)
      this.employeeList = res
      // 数据的总条数 等于数据的长度
      this.page.total = res.length
      const newList = this.employeeList.slice(0, 10)
      this.list = newList
    },

    currentChange(currentPage) {
      // console.log(currentPage)
      const newList = this.employeeList.slice(10 * (currentPage - 1), 10 * (currentPage))
      this.page.page = currentPage
      this.list = newList
    }
  }

}
</script>

<style lang='scss' scoped>
.box{
  margin-top: 30px;
}
.tableInfo {
    line-height: 36px;
    border: solid 1px #ebeef5;
    border-right: 0 none;
    border-bottom: 0 none;
    tr {
      th {
        height: 50px;
        text-align: center;
        border-right: solid 1px #ebeef5;
        border-bottom: solid 1px #ebeef5;
        border-bottom: 2px solid #e8e8e8;
        background: #fafafa;
        min-width:  100px;
      }
      td {
        height: 36px;
        text-align: center;
        border-right: solid 1px #ebeef5;
        border-bottom: solid 1px #ebeef5;
      }
    }
  }
</style>
